<template>
    <div class="page-wrap">
        <page-title></page-title>
        <div class="page-content">
            <div class="page-row">
                <div class="box-left">
                    <div class="tree-box-inner">
                        <div class="btn-box">
                            <el-button icon="el-icon-search" class="btn-search" type="text" title="搜索"
                                @click="showinput=!showinput">
                            </el-button>
                        </div>
                        <div class="search-input" v-if="showinput">
                            <el-input size="mini" clearable placeholder="输入检索条件" v-model="filterText"></el-input>
                        </div>
                        <div class="treediv">
                            <el-tree :filter-node-method="filterNode" ref="tree" node-key="id" class="tree-wrap"
                                :data="treeData" @node-click="nodeClick" :props="defaultProps" highlight-current>
                            </el-tree>
                        </div>
                    </div>
                </div>
                <div class="box-right p-0">
                    <div class="page-wrap">
                        <div class="page-content p-0">
                            <div class="page-column">
                                <!-- 表格搜索区域 -->
                                <div class="search-box">
                                    <div class="search-left">
                                        <el-button type="primary" class="m-r-12" size="medium"
                                            icon="el-icon-circle-plus" @click="newTriggerFun"
                                            :disabled="!ruleForm.typeIds">新增
                                        </el-button>
                                        <el-button size="medium" @click="mulDeleteFun" icon="el-icon-delete"
                                            :disabled="selection.length == 0">删除
                                        </el-button>
                                    </div>
                                    <div class="search-right">
                                        <el-input class="m-r-12 search-input" size="mini" placeholder="请输入名称" clearable
                                            v-model="titleLike">
                                            <el-button slot="append" icon="el-icon-search" @click="queryTriggerFun">
                                            </el-button>
                                        </el-input>

                                        <span @click="setColumn" class="search-icon"
                                            :class="selTableVisible?'activeicon':''">
                                            <i class="el-icon-setting"></i>
                                        </span>
                                        <!-- 列设置 -->
                                        <section class="scrollBar sel-colume" v-if="selTableVisible">
                                            <h3>
                                                <el-checkbox v-model="checked" @change="selAll">全选</el-checkbox>
                                            </h3>
                                            <el-checkbox-group v-model="staffTableSel" @change="selColumnChange">
                                                <div v-for="(item,
									index) in tableData.headerData" :key="'list' + index">
                                                    <el-checkbox :label="item.prop" :disabled="item.disabled">
                                                        {{ item.label }}
                                                    </el-checkbox>
                                                </div>
                                            </el-checkbox-group>
                                            <div class="sel-colume-button">
                                                <el-button type="text" @click="selTableBtn">确定</el-button>
                                                <el-button @click="cancelBtn" class="light-blue-btn" type="text">取消
                                                </el-button>
                                            </div>
                                        </section>

                                    </div>
                                </div>

                                <!-- 表格区域 -->
                                <div class="table-box">
                                    <el-table :key="tableKey" :data="tableData.columnData" height="100%"
                                        @selection-change="selectionChange">
                                        <el-table-column type="selection"></el-table-column>
                                        <el-table-column label="主题" prop="title" v-if="showColumn('title')"
                                            min-width="350" align='left'>
                                        </el-table-column>
                                        <el-table-column label="优先级" prop="priority" v-if="showColumn('priority')"
                                            width="100" align='center'>
                                        </el-table-column>
                                        <el-table-column label="描述" prop="descr" v-if="showColumn('descr')"
                                            min-width="350" align='left'>
                                        </el-table-column>
                                        <el-table-column label="状态" prop="statusName" v-if="showColumn('statusName')"
                                            min-width="90">
                                        </el-table-column>
                                        <el-table-column label="最后修改时间" prop="updDt" v-if="showColumn('updDt')"
                                            min-width="150">
                                            <template slot-scope="scope">
                                                {{ scope.row.updDt | formatDttm }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" fixed="right" width="150">
                                            <template slot-scope="scope">
                                                <div>
                                                    <el-button type="text" @click="editFun(scope.row)">编辑</el-button>
                                                    <el-button type="text" v-if="scope.row.statusCode == 'CLOSE'"
                                                        @click="activeFun(scope.row)">启用</el-button>
                                                    <el-button type="text" @click="singleDelete(scope.row)">删除
                                                    </el-button>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <!-- 表格分页区域 -->
                                <div class="pagination">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize"
                                        layout="sizes,total,prev,pager,next"
                                        :current-change.sync="tableData.currentPage"
                                        :current-page.sync="tableData.currentPage" :total="tableData.total">
                                    </el-pagination>
                                </div>
                            </div>

                        </div>
                        <!-- 表格相关操作组件区域 -->
                        <new-Trigger ref="tmp" @refresh="queryTriggerFun" :typeIds="ruleForm.typeIds"
                            :typeNamesLike="ruleForm.typeNamesLike" :typeCodeIds="ruleForm.typeCodeIds"></new-Trigger>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- <div class="page-wrap">
        <pageTitle></pageTitle>
        <div class="flex-row">
            <div class="left-box">
                <el-tree ref="tree" node-key="id" class="tree-wrap" :data="treeData" @node-click="nodeClick"
                    :props="defaultProps" highlight-current>
                </el-tree>
            </div>
            <div class="right-box">
                <div class="flex-column">
                    <div class="search-box" style="margin-top:10px">
                        <div class="search-form">
                            <el-input v-model="titleLike" placeholder="请输入名称">
                                <template slot="append">
                                    <el-button @click="queryTriggerFun">搜索</el-button>
                                </template>
                            </el-input>
                            <el-button type="success" @click="reset">重置</el-button>
                        </div>
                        <div class="btn-wrap">
                            <el-button icon="el-icon-circle-plus" @click="newTriggerFun" :disabled="!ruleForm.typeIds">
                                新增
                            </el-button>
                            <el-button icon="el-icon-delete" @click="mulDeleteFun" :disabled="selection.length == 0">
                                删除</el-button>
                            <el-button @click="setColumn" icon="iconfont icon-group10copy">
                                列设置
                            </el-button>
                        </div>
                        <section class="scrollBar sel-colume" v-if="selTableVisible">
                            <h3>
                                <el-checkbox v-model="checked" @change="selAll">全选</el-checkbox>
                            </h3>
                            <el-checkbox-group v-model="staffTableSel" @change="selColumnChange">
                                <div v-for="(item,index) in tableData.headerData" :key="'list'+index">
                                    <el-checkbox :label="item.prop" :disabled="item.disabled">
                                        {{item.label}}
                                    </el-checkbox>
                                </div>
                            </el-checkbox-group>
                            <div class="sel-colume-button">
                                <el-button @click="cancelBtn">取消</el-button>
                                <el-button class="light-blue-btn" @click="selTableBtn">确定</el-button>
                            </div>
                        </section>
                    </div>
                    <div class="flex-1">
                        <el-table :key="tableKey" :data="tableData.columnData" height="100%"
                            @selection-change="selectionChange">
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column label="主题" prop="title" v-if="showColumn('title')" min-width="350"
                                align='left'>
                            </el-table-column>
                            <el-table-column label="优先级" prop="priority" v-if="showColumn('priority')" width="100"
                                align='center'>
                            </el-table-column>
                            <el-table-column label="描述" prop="descr" v-if="showColumn('descr')" min-width="350"
                                align='left'>
                            </el-table-column>
                            <el-table-column label="状态" prop="statusName" v-if="showColumn('statusName')"
                                min-width="90">
                            </el-table-column>
                            <el-table-column label="最后修改时间" prop="updDt" v-if="showColumn('updDt')" min-width="150">
                                <template slot-scope="scope">
                                    {{ scope.row.updDt | formatDttm }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" width="150">
                                <template slot-scope="scope">
                                    <div>
                                        <el-button type="text" @click="editFun(scope.row)">编辑</el-button>
                                        <el-button type="text" v-if="scope.row.statusCode == 'CLOSE'"
                                            @click="activeFun(scope.row)">启用</el-button>
                                        <el-button type="text" @click="singleDelete(scope.row)">删除</el-button>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <section class="pagination page">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize"
                            layout="sizes,total,prev,pager,next" :current-change.sync="tableData.currentPage"
                            :current-page.sync="tableData.currentPage" :total="tableData.total">
                        </el-pagination>
                    </section>
                </div>
            </div>
        </div>
        <new-Trigger ref="tmp" @refresh="queryTriggerFun" :typeIds="ruleForm.typeIds"
            :typeNamesLike="ruleForm.typeNamesLike" :typeCodeIds="ruleForm.typeCodeIds"></new-Trigger>
    </div> -->
</template>

<script>
    import newTrigger from './newTrigger'
    import {
        columnSet
    } from '@/mixins/mixins';
    import {
        getByIdCfDateFun,
        getDelete,
        getByIdCfDetailed,
        getUpdateFun
    } from '@/service/core/trigger/index.js';
    import {
        getSysParaListByCodes
    } from '@/service/core/dictionary';
    export default {
        components: {
            newTrigger
        },
        mixins: [columnSet],
        data() {
            return {
                showinput: false,
                activeName: '1',
                treeData: [],
                selection: [],
                filterText: '',
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                titleLike: '',
                tableData: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    columns: 'updDt',
                    orders: 'DESC',
                    headerData: [{
                            label: '主题',
                            prop: 'title',
                            isShow: true,
                            disabled: true
                        },
                        {
                            label: '优先级',
                            prop: 'priority',
                            isShow: true,
                        },
                        {
                            label: '描述',
                            prop: 'descr',
                            isShow: true
                        },
                        {
                            label: '状态',
                            prop: 'statusName',
                            isShow: true
                        },
                        {
                            label: '最后修改时间',
                            prop: 'updDt',
                            isShow: false
                        },
                    ],
                    columnData: []
                },
                ruleForm: {
                    id: '',
                    typeIds: '',
                    typeCodeIds: '',
                    typeNamesLike: '',
                    titleLike: ''
                }
            };
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
        },
        created() {
            this.queryTriggerFun()
            this.getFirstClass()
        },
        methods: {
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            reset() {
                this.titleLike = ''
                this.queryTriggerFun()
            },
            newTriggerFun() { // 新增按钮
                this.$refs.tmp.showLayout();
            },
            handleCurrentChange(val) { //分页器
                this.tableData.currentPage = val;
                this.queryTriggerFun()
            },
            handleSizeChange(val) { //分页器
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.queryTriggerFun()
            },
            queryTriggerFun() { //获取查询表格数据
                if (!this.ruleForm.typeIds) {
                    return
                }
                let params = {
                    id: this.ruleForm.id,
                    columns: this.tableData.columns,
                    orders: this.tableData.orders,
                    startRow: this.tableData.currentPage,
                    rowSize: this.tableData.pageSize,
                    titleLike: this.titleLike,
                    typeIds: this.ruleForm.typeIds
                }
                getByIdCfDateFun(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data.data
                        this.tableData.columnData = data
                        this.tableData.total = res.data.data.total
                    }
                })
            },
            getFirstClass() { //左边栏树形数据
                getSysParaListByCodes('SP_TRA_TYPE').then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data['SP_TRA_TYPE'])) {
                            data = data['SP_TRA_TYPE'].map(item => {
                                return {
                                    id: item.id,
                                    label: item.name,
                                    value: item.valStr,
                                    children: [],
                                }
                            })
                            this.treeData.push(...data);
                            this.nodeClick(this.treeData[0]);
                            this.$nextTick(() => {
                                this.$refs.tree.setCurrentKey(this.treeData[0].id)
                            })
                        }
                    }
                })
            },
            nodeClick(treeNode) { // 树节点点击事件
                this.ruleForm.typeIds = treeNode.value;
                this.ruleForm.typeCodeIds = treeNode.id;
                this.ruleForm.typeNamesLike = treeNode.label;
                this.queryTriggerFun()
            },
            mulDeleteFun() { //选中删除
                let ids = this.selection.map(v => v.id);
                this.deleteFun(ids.join(','));
            },
            deleteFun(ids) {
                this.$confirm('确认删除选中的流程？', {
                    title: '提示',
                    type: 'warning'
                }).then(res => {
                    let params = {
                        ids: ids
                    }
                    getDelete(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '删除成功！'
                            })
                            this.queryTriggerFun()
                        }
                    })
                }).catch((error) => {
                    console.error('error!!')
                })
            },
            singleDelete(row) {
                this.deleteFun(row.id)
            },
            selectionChange(selection) {
                this.selection = selection;
            },
            editFun(row) { // 编辑
                this.$refs.tmp.showLayout(row);
            },
            activeFun(row) { // 启用
                this.$confirm('确认启用该流程？', {
                    title: '提示',
                    type: 'warning'
                }).then(res => {
                    let params = {
                        id: row.id,
                        statusCode: 'ACTIVE',
                        statusName: '启用'
                    }
                    getUpdateFun(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '已启用'
                            })
                            this.queryTriggerFun();
                        }
                    })
                }).catch(() => {})
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-wrap {
        background: none;
        padding: 5px;

        .flex-row {
            height: 100%;
            display: flex;
            flex-direction: row;

            .left-box {
                width: 280px;
                margin-right: 5px;
                padding: 5px;

                .tree-wrap {
                    height: 100%;
                    overflow: auto;
                }
            }

            .right-box {
                flex: 1;
                overflow: hidden;

                .flex-column {
                    height: 100%;
                }
            }
        }
    }
</style>